/* 全局样式表 */
html,body,#app{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
}

.container {
    max-width: 1380px;
    width: 100%;
    margin:20px auto;
    padding: 0 30px;
    
  }
/* flex */
.flex-layout{
    display: flex;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-column{
    display: flex;
   flex-direction: column;
    align-items: center;
}
.flex-row{
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 文字溢出处理 */
.ellipis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ellipsis-two {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.margin-top{
    margin-top: 20px;
}
.title {
    margin-bottom: 15px;
}

 /* 过渡效果 */
.fade-enter {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

.fade-enter-active {
    transition: all 0.5s;
}

.fade-leave-to {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

.fade-leave-active {
    transition: all 0.5s;
}

/* element image */
.el-image {
    width: 100%;
    height: 100%;
    
}
.el-menu--horizontal>.el-menu-item {
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
 }
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #ffffff;
    color: #fa2800;
}

.image-slot {
    width: 100%;
    height: 120px;
    line-height: 120px;
    text-align: center;
} 
.image-slot  i {
    font-size: 26px;
}

/* el-pagination 分页 */
.el-pagination{
    margin: 10px auto;
    text-align: center;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #fa2800;
    color: #FFF;
}
  
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    color: #fff;
}
  
.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #fa2800;
}
  /* el-card */
.el-card__body {
    padding: 0;
}

/* el-slider 滑块 */
.el-slider__runway{
    height: 4px;
}
.el-slider__bar {
    height: 4px;
    background-color: #fa2800;
}
.el-slider__button {
    border: 2px solid #fa2800;
}

/* 音乐频谱跳动 */
@keyframes play {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	to {
		-webkit-transform: translateY(85%);
		transform: translateY(85%)
	}
}
